<template>
    <el-button link type="primary" @click="add">
        添加
    </el-button>
    <!-- llll -->
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed type="index" label="序号" width="150" />
        <el-table-column prop="indescsName" label="行业名称" width="120" />
        <el-table-column prop="formTypeName" label="表单分类名称" width="120" />

        <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="handleClick(scope.row)">
                    修改
                </el-button>
            </template>
        </el-table-column>
    </el-table>
<!-- kjgdfkjgkdfjgk -->
    <el-pagination
      v-model:current-page="query.pageindex"
      v-model:page-size="query.pageSize"
      :page-sizes="[2, 4, 9, 11]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="query.tocount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      prev-text="上一页"
    />
<!-- kjgdfkjgkdfjgk -->

    <el-dialog v-model="dialogFormVisible" title="添加" width="500">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
            <el-form-item label="表单分类名称" prop="formTypeName">
                <el-input v-model="ruleForm.formTypeName" />
            </el-form-item>

            <el-form-item label="行业" prop="indescsId">
                <el-select v-model="ruleForm.indescsId" placeholder="Activity zone">
                    <el-option  label="公安" value="1" />
                    <el-option  label="行政" value="2" />
                </el-select>
            </el-form-item>

            
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    保存
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>




    <el-dialog v-model="dialogupdateVisible" title="修改" width="500">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
            <el-form-item label="表单分类名称" prop="formTypeName">
                <el-input v-model="ruleForm.formTypeName" />
            </el-form-item>

            <el-form-item label="行业" prop="indescsId">
                <el-select v-model="ruleForm.indescsId" placeholder="Activity zone">
                    <el-option  label="公安" value="1" />
                    <el-option  label="行政" value="2" />
                </el-select>
            </el-form-item>

            
            <el-form-item>
                <el-button type="primary" @click="update(ruleFormRef)">
                    保存
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script lang="ts" setup>

const dialogFormVisible = ref(false)
const dialogupdateVisible=ref(false)
const formLabelWidth = '140px'
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import axios from 'axios'
import router from '@/router'

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  query.pageSize=val;
  getshow();
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  query.pageindex=val;
  getshow();
}

interface RuleForm {
    indescsId: string
    formTypeName: string
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    indescsId: '',
  formTypeName: '',
})

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules<RuleForm>>({
    indescsId: [
    { required: true, message: '必填', trigger: 'blur' },
  ],
  formTypeName: [
    {
      required: true,
      message: '必选',
      trigger: 'change',
    },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!',ruleForm)
      axios.post("http://localhost:5242/api/Forms/CreateForm",ruleForm).then(res=>{
        if(res.data.code==200){
          ElMessage.success(res.data.meg);
          getshow();
          dialogFormVisible.value=false;
        }
        else{
          ElMessage.error(res.data.meg);
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))

const handleClick = () => {
    dialogupdateVisible.value=true;

}


const fantian=(row:any)=>{
    ruleForm.indescsId=row.indescsId;
    ruleForm.formTypeName=row.formTypeName;
}
const update=()=>{
    axios.put("http://localhost:5242/api/Forms/UpdateForm",ruleForm).then(res=>{
        if(res.data.code==200){
          ElMessage.success(res.data.meg);
          getshow();
          dialogupdateVisible.value=false;
        }
        else{
          ElMessage.error(res.data.meg);
        }
      })
    } 

const add = () => {
    dialogFormVisible.value=true;
}


onMounted(()=>{
    xiashow();
    getshow();
})
const xiala:any=ref([])
const xiashow=()=>{
    axios.get("http://localhost:5096/api/Login/ShowInde").then(res=>{
        xiala.value=res.data.data;
    })
}


const tableData = ref([])
const query=reactive({
    pageindex:1,
    pageSize:2,
    tocount:0,
    topage:0
})
const getshow=()=>{
    axios.get("http://localhost:5096/api/Login/Showform",{params:query}).then(res=>{
        tableData.value=res.data.data.data;
        query.tocount=res.data.data.tocount;
        query.topage=res.data.data.topage;
    })
}

</script>